<template>
  <div class="debt-paying-ability">
    <div class="chart">
      <div class="title">活动比率</div>
      <div class="chat-wrapper" id="chat1" ref="chat1"></div>
    </div>
    <div class="chart">
      <div class="title">速动比率 </div>
      <div class="chat-wrapper" id="chat2" ref="chat2"></div>
    </div>
    <div class="chart">
      <div class="title">资产负债率</div>
      <div class="chat-wrapper" id="chat3" ref="chat3"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { cloneDeep } from 'lodash'

const baseOption = {
  grid: {
    left: '-3%',
    right: '2%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {type: 'cross'}
  },
  legend: {
    top: 10,
    left: 20,
    data:[],
    textStyle: {
      fontsize: 12
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['2018', '2019' , '2020', '2021', '2022'],
      axisTick: { show: false },
      axisLine: { show: false }
    }
  ],
  yAxis: [
    {
      show: false
    },
    {
      show: false
    }
  ],
  series: [
    {
      name:'barChat',
      type:'bar',
      barWidth: 20,
      itemStyle: {
        color: '#3878ff',
      },
      label: {
        show: true,
        position: 'top',
        fontSize: 12,
        color: '#5D5F62',
      },
      data: []
    },
    {
      name:'lineChat',
      type:'line',
      symbolSize : 8,
      yAxisIndex:1,
      label: {
        show: false,
        position: 'right',
        offset: [-50, -25],
        fontSize: 12,
        color: '#52C41A',
        formatter: (e) => {
          return e.value + '%'
        }
      },
      itemStyle: {
        color: '#52C41A',
      },
      lineStyle: {
        color: '#52C41A',
        width: 2,
      },
      data:[]
    }
  ]
};
export default {
  name: "DebtPayingAbility",
  mounted() {
    this.initChat()
  },
  methods: {
    initChat() {
      const chat1 = echarts.init(this.$refs.chat1);
      const chat2 = echarts.init(this.$refs.chat2);
      const chat3 = echarts.init(this.$refs.chat3);

      const chat1Option = cloneDeep(baseOption)
      chat1Option.yAxis[0].name = '流动比率'
      chat1Option.series[0].name = '流动比率(%)'
      chat1Option.series[0].data = [7.96, 7.69, 6.98, 6.06, 3.94]
      chat1Option.series[0].color = '#56C9ED'
      chat1Option.series[0].itemStyle.color = () => new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#56C9ED' },
        { offset: 1, color: '#b9e7f6' }
      ])

      chat1.setOption(chat1Option)

      const chat2Option = cloneDeep(baseOption)
      chat2Option.yAxis[0].name = '速动比率'
      chat2Option.series[0].name = '速动比率(%)'
      chat2Option.series[0].data = [4.79, 5.47, 3.41, 7.13, 1.71]
      chat2Option.series[0].color = '#3878ff'
      chat2Option.series[0].itemStyle.color = () => new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#3878FF' },
        { offset: 1, color: '#b5ccfd' }
      ])
      chat2.setOption(chat2Option)

      const chat3Option = cloneDeep(baseOption)
      chat3Option.yAxis[0].name = '资产负债率'
      chat3Option.series[0].name = '资产负债率(%)'
      chat3Option.series[0].data = [4.09, 4.79, 3.02, 6.07, 1.07]
      chat3Option.series[0].color = '#FEA728'
      chat3Option.series[0].itemStyle.color = () => new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#FEA728' },
        { offset: 1, color: '#fae8ce' }
      ])
      chat3.setOption(chat3Option)

    }
  }
}
</script>

<style scoped lang="scss">
.debt-paying-ability {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  flex-wrap: wrap;
  .chart {
    width: 330px;
    height: 341px;
    background: #F9FAFC;
    //border: solid 1px rgba(238, 238, 238, 1);
    border-radius: 2px;
    margin-bottom: 12px;
    margin-right: 12px;
    &:last-child {
      margin-right: 0;
    }
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #F9FAFC;
      padding-left: 24px;
      font-size: 16px;
      font-weight: bold;
      //color: #3878ff;
    }
    .chat-wrapper {
      width: 100%;
      height: 280px;
    }
  }
}
</style>
